<template>
  <div class="page">
    <!-- page header -->
    <van-nav-bar class="page-header" title="标题" fixed :z-index="100"/>
    <!-- page body -->
    <div class="page-body">
      <div class="tab-content" v-if="tabBarActive == 0">
        <!-- tabs -->
        <van-tabs swipeable v-model="tabActive">
          <van-tab v-for="item in categoryList" :title="item.category_name" :key="item.id">
            <van-swipe class="swipe" :autoplay="3000">
              <van-swipe-item class="swipe-item"></van-swipe-item>
              <van-swipe-item class="swipe-item"></van-swipe-item>
              <van-swipe-item class="swipe-item"></van-swipe-item>
              <van-swipe-item class="swipe-item"></van-swipe-item>
            </van-swipe>
          </van-tab>
          <!-- list -->
          <media-list>
            <media-item v-for="item in articleList" :key="item.id" :data="item"/>
          </media-list>
        </van-tabs>
      </div>
      <div class="tab-content" v-if="tabBarActive == 1">
        tab2
      </div>
      <div class="tab-content" v-if="tabBarActive == 2">
        tab3
      </div>
      <div class="tab-content" v-if="tabBarActive == 3">
        tab4
      </div>
    </div>
    <!-- page-footer -->
    <van-tabbar class="page-footer" v-model="tabBarActive">
      <van-tabbar-item icon="shop">标签</van-tabbar-item>
      <van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
      <van-tabbar-item icon="records" info="5">标签</van-tabbar-item>
      <van-tabbar-item icon="gold-coin" info="20">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { MediaList, MediaItem } from '~/components/MediaList'
import XImage from '~/components/Image'
import category from '~/api/category'
import article from '~/api/article'

export default {
  name: 'App',
  components: {
    MediaList,
    MediaItem,
    XImage
  },
  async asyncData ({ params }) {
    const { list } = await category.query({})
    let categoryId = params.id || (list[0] && list[0].category_id)
    let articleData = await article.query({categoryId})
    return {
      activeName: `/channel/${categoryId}`,
      categoryList: list,
      articleList: articleData.list
    }
  },
  data () {
    return {
      tabActive: 0,
      tabBarActive: 0
    }
  },
  watch: {
    async tabActive (index) {
      let { category_id } = this.categoryList[index]
      let { list } = await article.query({categoryId: category_id})
      this.articleList = list;
    }
  },
  methods: {
    handleMenuSelect (name) {
      this.$router.push(name)
    }
  }
}
</script>

<style lang="scss" scoped>
  .swipe {
    height: 150px;
    .swipe-item {
      &:nth-child(odd) {
        background: #66c6f2;
      }
      &:nth-child(even) {
        background: #39a9ed;
      }
    }
  }
</style>
